<template>
  <div>
    <NavBar :title="title"></NavBar>
    <van-search v-model="searchApiva" show-action label="地址" placeholder="请输入搜索关键词" @search="onSearch">
      <template #action>
        <div @click="onClickButton">搜索</div>
      </template>
    </van-search>

    <div v-for="item in searchlist" v-show="astart">
        <router-link :to="{name:'detail',params:{goods_id:item.goods_id}}">
             <van-card :price="item.goods_price" :title="item.goods_name"
        :thumb="item.goods_small_logo ? item.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'" /> 
     </router-link>
    </div>
    <van-empty description="描述文字" v-show="tart" />
    <van-skeleton title :row="3" v-show="start" />

  </div>
</template>

<script setup>
import NavBar from '@/components/NavBar.vue';
const title = '搜索'
import { ref, watch } from 'vue';
import { goodsApi } from '@/api/api';
const searchApiData = ref([])
const searchlist = ref([])
let page = ref(1)
let size = ref(7)
const searchApiva = ref('')
const start = ref(false)
const astart = ref(false)
const tart = ref(false)
import _ from 'lodash'
watch(searchApiva, _.debounce
((val) => {

  if (val.length > 0) {
    start.value = true
    astart.value = true
    goodsApi(val).then(res => {
      console.log(res);
      searchApiData.value = res.data.message.goods
      searchlist.value = searchApiData.value
      let sIndex = (page.value - 1) * size.value
      let eIndex = sIndex + size.value
      searchlist.value = searchlist.value.slice(sIndex, eIndex)
      const loading = ref(false);
      const finished = ref(false);
      const refreshing = ref(false);

      if (res.data.message.total == 0) {
        start.value = false
        tart.value = true

      } else {
        start.value = false
        tart.value = false
      }
    })
  } else {
    start.value = false
    astart.value = false
    tart.value = false
  }

}, 2000))
const onRefresh = () => {
  console.log('23456');
      

}
</script>

<style lang="scss" scoped></style>